<script setup>

import {useRouter} from "vue-router";

let router = useRouter();

function addProductRouter() {
  if (router.hasRoute('product')) {
    console.log("已经存在了 product 路由");

  } else {
    const Product = () => import( "../components/Product.vue")
    router.addRoute(
        {
          path: "/product/:id",
          component: Product,
          name: "product"
        }
    )
    console.log("已经成功添加 product 路由");
  }

}

function removeProductRouter() {
  if (router.hasRoute('product')) {

    router.removeRoute('product')
    console.log("已经成功删除 product 路由");
  }
}

</script>

<template>
  <div>
    <button v-on:click="addProductRouter">添加路由</button>
    <button v-on:click="removeProductRouter">删除路由</button>
  </div>

  <div>
    <router-link to="/product/1">产品1</router-link>
    <router-link to="/product/2">产品2</router-link>
  </div>
  <router-view></router-view>
</template>

<style scoped>

</style>